<template>
  <view class="container w100p common_wrap no-bg">
    <CommonHeader
      title="上传付款凭证"
      color="#262728"
      :is-right="false"
    ></CommonHeader>
    <view class="bg-color"></view>

    <!-- 内容区 -->
    <scroll-view scroll-y class="scroll-h">
      <view class="content-wrapper">
        <view class="good-wrapper">
          <view class="order-title">待付款订单编号:202412021157</view>
          <view class="order-good" v-for="(item, index) in 3" :key="index">
            <view class="img">
              <image src="/static/mt-li/pic.png" mode="aspectFill"/>
              <view class="tag">不含运费</view>
            </view>
            <view class="order-desc">
              <view class="name-w">
                <view class="name ellipsis_two">通用汽车桌垫四季通用冰通用汽车桌垫四季通用冰 凉透气全车型</view>
                <view class="num">x1</view>
              </view>
              <view class="attr">通用车型--白色</view>
              <view class="price"><text>￥</text>9999</view>
            </view>
          </view>
        </view>

          <!-- 运输 -->
          <view class="yunshu">
            <view class="ti">已选择商家代运输服务</view>
            <view class="price"><text>￥</text>99</view>
          </view>

           <!-- 配件信息 -->
          <view class="peijian-lists">
            <view class="peijian" v-for="(item, index) in 3" :key="index">
              <view class="title">物通用汽车座垫四季通用冰凉透气全车型品信息</view>
              <view class="good-jian">
                <image src="/static/mt-li/pic.png" mode="aspectFill" />
                <view class="right-items">
                  <view class="item-good" v-for="(item, index) in 3" :key="index">
                    <view class="ti">物品总体积</view>
                    <view class="jian">3*7m³/5件</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
    
    

        <!-- 上传支付凭证 -->
        <view class="up-payzhen">
          <view class="top-pinzheng">
            <view class="left-pinzhen">
              <view class="top-pay">
                <view class="name">上传支付凭证</view>
                <view class="desc">支持pdf、jpg、png格式</view>
              </view>
              <view class="btn">确认上传/等待商家确认</view>
            </view>
            <view class="add"> 
              <image
                src="/static/mt-li/add.png"
              />  
            </view>
          </view>
          <view class="tips"
            >注意：确认上传后不可修改、撤回。为防止意外情况，请确保无误后上传</view
          >
        </view>
        
        <!-- 按钮组 -->
        <view class="btn-wrapper">
          <view class="btn" >继续逛逛</view>
          <view class="btn active">完成</view>
          <view class="tips">订单详情可在“工作台”中“我的订单”中随时查看</view>
        </view>
      </view>
    </scroll-view>

  </view>
</template>

<script>
import CommonHeader from "../components/common-header.vue";
export default {
  data() {
    return {};
  },
  components: {
    CommonHeader,
  },
  onLoad() {

  },
  methods: {
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
